<template>
  <el-container>
    <el-aside width="200px">
      <h5 class="header">
        <el-button round type="primary" :icon="SwitchButton" @click="logout">
          退出登录
        </el-button>
        <!-- 12345678 -->
        <!-- <el-button type="primary" @click="dialogVisible = true">修改密码</el-button> -->
        <!--  -->
      </h5>
      <!-- 左侧菜单 -->
      <el-menu :default-active="active" router active-text-color="#ffd04b" background-color="#545c64" text-color="#fff">
        <template v-for="item in children">
          <el-menu-item :index="'/' + item.path">
            <el-icon>
              <component :is="item.meta.icon" />
            </el-icon>
            <span>{{ item.meta.title }}</span>
          </el-menu-item>

        </template>
        <Icon></Icon>
      </el-menu>
    </el-aside>

    <el-main>
      <RouterView />
    </el-main>
  </el-container>
  <el-dialog v-model="dialogVisible" title="Tips" width="500">
    <div> <el-form :model="passwordForm" :rules="passwordRules" ref="passwordForms" label-width="80px">
        <el-form-item label="旧密码" prop="oldPassword">
          <el-input v-model="passwordForm.oldPassword" type="password"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input v-model="passwordForm.newPassword" type="password"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input v-model="passwordForm.confirmPassword" type="password"></el-input>
        </el-form-item>
      </el-form></div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitForm()">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>

</template>

<script setup>
import { ElMessage } from 'element-plus'
import { ref } from "vue"
import { RouterView } from "vue-router"
import router from "../router"
import children from "@/router/children";
import http from "@/api/build";

const dialogVisible = ref(false)
const passwordForm = ref({
  oldPassword: '',
  newPassword: '',
  confirmPassword: ''
});
const passwordRules = {
  oldPassword: [
    { required: true, message: '请输入旧密码', trigger: 'blur' }
  ],
  newPassword: [
    { required: true, message: '请输入新密码', trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, message: '请再次输入新密码', trigger: 'blur' },
  ]
};



const submitForm = async () => {
  try {
    let token = localStorage.getItem("token");
    // 从 ref 获取用户输入的密码数据
    let old_password = passwordForm.value.oldPassword;
    let new_password = passwordForm.value.newPassword;
    let confirm_password = passwordForm.value.confirmPassword;

    // 验证新密码和确认密码是否一致
    if (new_password !== confirm_password) {
      alert("新密码和确认密码不匹配");
      return;
    }

    // 调用修改密码的方法，并传入旧密码和新密码
    const response = await http.changePassword(old_password, new_password, token);
    // 修改密码成功，这里可以添加一些成功提示或其他操作
    console.log("密码修改成功", response);
    if (response.code == 0) {
      alert("修改成功")
    }
    dialogVisible.value = false;

  } catch (error) {
    // 处理修改密码失败的情况，例如显示错误提示
    console.error("密码修改失败", error);
  }
};


// 退出登录
const logout = () => {
  localStorage.removeItem('token')
  router.replace({ name: 'login' })
}

const active = ref(router.currentRoute.value.path)

</script>
<style scoped>
.el-container {
  height: 100vh;
  overflow: hidden;
}

.el-aside {
  display: flex;
  flex-direction: column;

}

.header {
  margin: 0;
  padding: 20px 0;
  text-align: center;
  border-right: solid 1px #dcdfe6;
  border-bottom: solid 1px #dcdfe6;
  background-color: #545c64;
  color: white;
}

.el-menu {
  flex: 1;
}
</style>
